const path = require('path');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');        //压缩js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");  //分离css
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin'); //压缩css
const CleanWebpackPlugin = require('clean-webpack-plugin');       //打包前清空
const copyWebpackPlugin=require('copy-webpack-plugin');           //复制静态资源
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;    //性能分析
const webpackMerge = require('webpack-merge');
const webpackConfigBase = require('./webpack.base');


 const webpackConfigProd={
    mode:'production',
    module: {
        rules: [
            //  scss编译
            // npm i sass-loader node-sass css-loader style-loader postcss-loader autoprefixer -D
            {
                test: /\.(sa|sc|c)ss$/,
                include: path.resolve(__dirname, '../src'),
                use: [
                     MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader',
                     {
                        loader:'postcss-loader',
                        options:{
                            plugins:[
                                require('autoprefixer')({
                                    browsers : ['last 30 versions', "> 2%", "Firefox >= 10", "ie 6-11"]
                                })
                            ]
                        }
                    }
                ],
            },
        ],
    },
    plugins: [
        //压缩js
        new UglifyJsPlugin({
            uglifyOptions: {
                compress: {
                    warnings: false, // 在UglifyJs删除没有用到的代码时不输出警告
                    drop_console: true, // 删除所有的 `console` 语句，可以兼容ie浏览器
                    collapse_vars: true, // 内嵌定义了但是只用到一次的变量
                    reduce_vars: true // 提取出出现多次但是没有定义成变量去引用的静态值
                },
            },
            sourceMap: true,
            parallel: true,
        }),
        //打包前清空目录
        new CleanWebpackPlugin(['dist'],{
            root: path.resolve(__dirname, '../'),   //根目录
            verbose: true,                          //开启在控制台输出信息
            dry:      false        　　　　　　　　　　//启用删除文件
        }),
        //分离css
        new MiniCssExtractPlugin({
            filename: '[name].[hash:8].css',
            chunkFilename:'[id].[hash:8].css',
        }),
        //压缩css
        new OptimizeCSSPlugin({
            cssProcessorOptions: {safe: true}
        }),
        //静态资源输出,将src目录下的assets文件夹复制到dist目录下
       /* new copyWebpackPlugin([{
            from: path.resolve(__dirname, "../src/assets"),
            to: './assets',
            ignore: ['.*']
        }]),*/
        //npm run build 后会打开一个页面，性能分析
        //new BundleAnalyzerPlugin()

    ],
     optimization: {
         splitChunks: {
             cacheGroups: {
                 vendor: {
                     test: /[\\/]node_modules[\\/]/,
                     chunks: "initial", //表示显示块的范围，有三个可选值：initial(初始块)、async(按需加载块)、all(全部块)，默认为all;
                     name: "vendor", //拆分出来块的名字(Chunk Names)，默认由块名和hash值自动生成；
                     enforce: true,
                 },
                /* utils: { // 抽离自己写的公共代码，utils 这个名字可以随意起
                     chunks: 'initial',
                     name: 'utils',  // 任意命名
                     minSize: 0    // 只要超出 0 字节就生成一个新包
                 }*/
             }
         }
     },
};
module.exports = webpackMerge(webpackConfigBase,webpackConfigProd);